<!DOCTYPE html>
<html>
<head th:include="_header_include::frag(~{::title},~{::style},~{})" >
    <title>客户详情信息</title>
    <meta charset="UTF-8">
    <style>
        .borderbox .el-button{font-size: 12px;float: left;}
    </style>
</head>
<body>
<div id="addCustomer" class="addCustomer mainPadding" style="display: none;"> 
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>商务管理</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理（商务）</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="borderbox">
        <el-form :model="form" :rules="rules" ref="form" class="padding20">
             <font color="red" class="fs16">资源ID：<span th:text="${clueId}"></span></font>
            <div class="marginB20 fs16 paddingT20">资源信息</div>
            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="资源类型：" :label-width="formLabelWidth" >
                            <span>{{clueBase.typeName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="资源类别：" :label-width="formLabelWidth" >
                            <span>{{clueBase.categoryName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="留言时间：" :label-width="formLabelWidth" >
                            <span>{{clueBase.messageTime}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="搜索词：" :label-width="formLabelWidth" >
                            <span>{{clueBase.searchWord}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="留言重点：" :label-width="formLabelWidth" class="breakWord">
                            <span>{{clueBase.messagePoint}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

            </div>
            <div class="marginB20 fs16 paddingT20">基本信息</div>
            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="客户姓名：" prop="customerName" :label-width="formLabelWidth" >
                            <span>{{form.customerName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户级别：" :label-width="formLabelWidth" >
                            <span>{{form.customerLevel}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户联系电话：" prop="customerPhone" :label-width="formLabelWidth" >
                            <a><font color="red">{{form.customerPhone}}</font></a>
                        </el-form-item>
                    </el-col>                    
                </el-row>
              <!--  <el-row>
                    <el-col :span="8">
                        <el-form-item label="微信：" prop="wechat" :label-width="formLabelWidth">
                            <span>{{form.wechat}}</span>
                            <span v-if="form.wechat2 || form.wechatUrl">
                                <span @click="openWechat" style="padding-left: 5px; color: rgb(0, 114, 255); cursor: pointer;">查看多个微信/二维码</span>
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="QQ：" :label-width="formLabelWidth" >
                            <span>{{form.qq}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="邮箱：" prop="customerEmail" :label-width="formLabelWidth">
                           <span>{{form.customerEmail}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>-->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="性别：" :label-width="formLabelWidth" >
                            <span>{{form.customerSex==1?'男':form.customerSex==2?'女':''}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="年龄：" :label-width="formLabelWidth" >
                            <span>{{form.customerAge}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="职业：" :label-width="formLabelWidth" >
                            <span>{{form.customerJob}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="身份证号：" :label-width="formLabelWidth" >
                            <span>{{form.identityCard}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="卡点：" :label-width="formLabelWidth" >
                            <span>{{form.offerEndTime}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="卡点备注：" :label-width="formLabelWidth" >
                            <span>{{form.offerEndRemark}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="餐饮经验：" :label-width="formLabelWidth" >
                            <span>{{form.experience}}</span>
                            <span>{{form.cateringType}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="选址情况：" :label-width="formLabelWidth">
                            <span>{{form.address}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合伙人：" :label-width="formLabelWidth" >
                            <span>{{form.customerPartner}}</span>
                            <span>{{form.customerPartnerDetail}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="决策人：" :label-width="formLabelWidth">
                            <span>
                                {{form.decisionMaker==2?'他人 '+form.decisionMakerOther :(form.decisionMaker==1?'自己本人 ':'')}}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出资人：" :label-width="formLabelWidth">
                            <span>
                                {{form.sponsor==2?'他人 '+form.sponsorOther :(form.sponsor==1?'自己本人 ' :'')}}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="marginB20 fs16 paddingT20">投资意向信息</div>
            <div class="borderbox padding20">
              <el-row>
                    <el-col :span="8">
                        <el-form-item label="投资金额：" :label-width="formLabelWidth" >
                            <span>{{form.money}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="店面大小：" :label-width="formLabelWidth" >
                            <span>{{form.area}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="意向品类：" :label-width="formLabelWidth" >
                            <span>{{form.intentionCategory}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="意向项目：" :label-width="formLabelWidth" >
                            <span>{{form.radioProject==1? form.insideProject:form.outsideProject}}</span>
                        </el-form-item>
                    </el-col>               
                    <el-col :span="8">
                         <el-form-item label="开店紧迫性：" :label-width="formLabelWidth"  >
                             <span>{{form.urgency}}</span>
                             <!--</el-input>--><span v-show="showUrgency" style="padding-left: 5px;" >之前启动</span>
                         </el-form-item>
                     </el-col>
                    <el-col :span="8">
                        <el-form-item label="开店区域：" :label-width="formLabelWidth">
                            <span>{{form.province}}{{form.city}}{{form.district}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="是否在考虑同行业：" :label-width="formLabelWidth">
                           {{form.istrade==0?'否':form.tradeProject}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="marginB20 fs16 paddingT20">上传资料</div>
            <el-row>
                    <el-table
                            ref="multipleTable"
                            :data="tableDataC1"
                            tooltip-effect="dark"
                            style="width: 100%"
                            border
                    >
                        <el-table-column
                                type="index" label="序号"
                                header-align="center" align="center" width="100">
                        </el-table-column>
                        <el-table-column
                                prop="uploadUserName"
                                label="上传人姓名"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="uploadTime"
                                label="上传时间"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="fileName"
                                label="文件名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-button size="mini"type="text" @click="handleOperateFn(scope.$index, scope.row)">
                                    <!-- {{scope.row.fileType =="mp3"? '下载录音':'查看图片'}} -->
                                    {{scope.row.fileType !=="jpg" && scope.row.fileType !=="png" && scope.row.fileType !=="jpeg" && scope.row.fileType !=="gif" && scope.row.fileType !=="bmp"? '下载录音':'查看图片'}}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="delStatus"
                                label="删除状态"
                                align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.delStatus === 0">
                                    未删除
                                </div>
                                <div v-else-if="scope.row.delStatus ===1">
                                    已删除
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            <div class="marginB20 fs16 paddingT20">跟进记录</div>
            <el-row>
                <el-table
                    ref="multipleTable"
                    :data="tableDataC2"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                 >
                    <el-table-column
                            type="index" label="序号"
                            header-align="center" align="center" width="100">
                    </el-table-column>
                    <el-table-column
                      prop="callTime"
                      label="跟进时间"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="customerStatusName"
                      label="客户状态"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="isCall"
                      label="是否接通"
                      align="center">
                     <template slot-scope="scope">
                      <div v-if="scope.row.isCall === 0">
                                                                                未接通
                      </div>
                       <div v-else-if="scope.row.isCall ===1">
                           接通/微信沟通
                       </div>
                     </template>
                    </el-table-column>
                    <el-table-column
                      prop="focusPoint"
                      label="客户关注点"
                      align="center">
                    </el-table-column>
                    <!--<el-table-column-->
                      <!--prop="visitStatus"-->
                      <!--label="是否继续回访"-->
                      <!--align="center">-->
                      <!--<template slot-scope="scope">-->
                      <!--<div v-if="scope.row.visitStatus === 0">-->
                                                                               <!--否-->
                      <!--</div>-->
                       <!--<div v-else-if="scope.row.visitStatus ===1">-->
                                                                             <!--是-->
                       <!--</div>-->
                     <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                      prop="nextVisitTime"
                      label="下次回访时间"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="createUserName"
                      label="创建人"
                      align="center">
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row class="fs16 paddingT20" style="overflow: hidden;" v-if="clueBase.transferRemark">
                <span class="f-fl">外调备注：</span>
                <span class="f-fl" style="word-wrap: break-word;word-break: break-all;white-space: pre-wrap !important;">{{clueBase.transferRemark}}</span></el-row>
            <el-row class="fs16 paddingT20" style="overflow: hidden;" v-if="clueBase.allocateRemark">
                <span class="f-fl">分发备注：</span>
                <span class="f-fl" style="word-wrap: break-word;word-break: break-all;white-space: pre-wrap !important;">{{clueBase.allocateRemark}}</span></el-row>
            <div class="marginB20 fs16 paddingT20 callLogBox">
                通话记录
                <!-- 播放器 -->
                <audio id="audio" src="" controls="controls" autoplay="autoplay" controlsList="nodownload" oncontextmenu="return false" v-show="audioShow"></audio>
            </div>
            <el-table ref="multipleTable" :data="tableDataC3" tooltip-effect="dark" style="width: 100%" border @selection-change="handleSelectionChange">
                <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                <el-table-column prop="accountName" label="姓名" align="center"></el-table-column>
                <el-table-column prop="roleName" label="角色" align="center"></el-table-column>
                <el-table-column prop="callType" label="通话类型" align="center"></el-table-column>
                <el-table-column prop="startTime" label="拨打时间" :formatter="getStartTimeText"  align="center"></el-table-column>
                <el-table-column prop="callStatus" label="接通情况" align="center"></el-table-column>
                <el-table-column prop="talkTime" label="接通时长"  :formatter="getTalkTimeText"  align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope" v-if="scope.row.talkTime >0 ">
                        <a :id="scope.row.id" class="sound-trigger sound-trigger--type-default sound-trigger--type-click cursorP" @click="switchSoundBtn(scope.row.id,scope.row.recordFile,scope.row.callSource)">
                            <span class="sound-trigger__inner"><i class="fa fa-play-1 fa-lg"></i></span>
                        </a>

                        <a  class="download_img" v-if="scope.row.accountId==loginUserId" @click="downloadAudio(scope.row.id,scope.row.recordFile,scope.row.callSource)"></a>
                    </template>
                </el-table-column>
            </el-table>


            <div class="marginB20 fs16 paddingT20">流转人员</div>
            <el-table
                ref="multipleTable"
                :data="tableDataC4"
                tooltip-effect="dark"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange"
             >
                <el-table-column
                  type="index"
                  width="55"
                  label="序号"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="roleName"
                  label="角色"
                  align="center">
                </el-table-column>
                <el-table-column
                        prop="orgName"
                        label="所属组(组名)"
                        align="center">
                </el-table-column>
                <!--<el-table-column-->
                  <!--prop="userName"-->
                  <!--label="服务人员姓名"-->
                  <!--align="center">-->
                <!--</el-table-column>-->
                <el-table-column
                  prop="createTime"
                  label="开始服务时间"
                  align="center">
                </el-table-column>
            </el-table>

        </el-form>
    </el-row>

    <!-- dialog -->
    <el-dialog title="添加手机号" :visible.sync="dialogFormVisible">
        <el-form :model="dialogForm" :rules="dialogRules" ref="dialogForm">
            <el-form-item label="手机号2：" :label-width="formLabelWidth">
                <span>15111111111</span>
                <span><i class="el-icon-phone-outline" style="font-size: 20px;color: rgb(0, 114, 255);cursor: pointer;"></i></span>
            </el-form-item>
            <el-form-item label="手机号3：" prop="phoneNum" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.phoneNum" autocomplete="off" style="width: 60%;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="f-tac">
            <el-button type="primary" @click="submitDialogForm('dialogForm')">提 交</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
    <!-- dialog -->
    <el-dialog title="二维码" :visible.sync="dialogFormImg">
        <div class="padding20" style="text-align: center;">
            <img :src="showwchatcode" alt=""
                 style="width: 250px; height: 250px;">
        </div>
    </el-dialog>
    <!-- 上传资源dialog -->
    <el-dialog title="查看图片" :visible.sync="dialogFormUploadImg"  width="1100px">
        <div class="padding20" style="text-align: center;">
            <img :src="dialogFormUploadImgSrc" alt="" max-width="1000px">
        </div>
    </el-dialog>
    <!-- dialog -->
    <el-dialog title="查看微信" :visible.sync="wechatVisible" width="540px">
        <template>
            <el-form :model="wechatForm" ref="wechatForm" >
                <el-form-item label="微信2：" :label-width="formLabelWidth1" >
                    <el-input v-model="wechatForm.wechat2" placeholder="" maxLength="20" style="width: 290px;"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth1" >
                    <img v-show="wechatForm.wechatUrl!=''" :src="wechatForm.wechatUrl" width="290px" style="border-radius:6px;">
                </el-form-item>
            </el-form>
        </template>
    </el-dialog>
</div>
</body>
<style type="text/css">
    .paddingTB { padding: 4px 0px; }
    .paddingL55 { padding-left: 55px; }
    .el-form-item.lineInherit .el-form-item__content{ line-height: inherit!important; }
    @media screen and (width:1920px) {
        .paddingL55 .el-date-editor.el-input { width: 218px; }
        /*.paddingL55 div.el-form-item:nth-of-type(2) { width: 100px; }*/
        .paddingL55 div.el-form-item, .paddingL55 .el-input--mini .el-input__inner { width: 202px; }
        .paddingL55 div.el-form-item:last-child { width: 186px; text-align: center; }
    }
    @media screen and (width:1366px) {
        .paddingL55 { line-height: 28px; }
        .paddingL55 .el-date-editor.el-input { width: 145px; }
        /*.paddingL55 div.el-form-item:nth-of-type(2) { width: 100px; }*/
        .paddingL55 div.el-form-item, .paddingL55 .el-input--mini .el-input__inner { width: 133px; }
        .paddingL55 div.el-form-item:last-child { width: 106px; text-align: center; }
    }
    @media screen and (max-width:1365px) {
        .paddingL55 { line-height: 28px; }
        .paddingL55 .el-date-editor.el-input { width: 145px; }
        /*.paddingL55 div.el-form-item:nth-of-type(2) { width: 100px; }*/
        .paddingL55 div.el-form-item, .paddingL55 .el-input--mini .el-input__inner { width: 133px; }
        .paddingL55 div.el-form-item:last-child { width: 106px; text-align: center; }
    }
    .fa-play-1 {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_play.png);
        background-repeat: no-repeat;
    }
    .fa-stop-1 {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_stop.png);
        background-repeat: no-repeat;
    }
    .download_img {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_download.png);
        background-repeat: no-repeat;
    }
</style>
<!-- import Vue before Element -->
 <div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript" >
var clueId=[[${clueId}]];//资源ID
var customer=[[${customer}]];//客户信息
var base=[[${base}]];//资源基本信息
var intention=[[${intention}]];//资源投资意向信息
var proSelect=[[${proSelect}]];//项目
var circulationList=[[${circulationList}]];//资源流转记录
var trackingList=[[${trackingList}]];//跟访记录
var clueFileList=[[${clueFileList}]];//上传文件
var callRecord=[[${callRecord}]];//上传文件
var loginUserId=[[${loginUserId}]];
var isEdit=false;
var vform;
var ossUrl = [[${ossUrl}]];//上传文件地址
if(proSelect==null){
    proSelect = []
}
for(var i = 0 ; i < proSelect.length ; i++){
    if( proSelect[i].id+"" == intention.purInProject){
        intention.purInProject =  proSelect[i].projectName;
    }
 }
var showwchatcode = '/images/errorIcon.jpg';
var showWchatFlag = false;
var showUrgency = false;
if(customer==null){
    vform= {
    		loginUserId:loginUserId,
            customerName:"",
            customerPhone:"",
            customerSex:"",
            wechat:'',
            wechat2:'',
            wechatUrl:'',
            experience:"",
            customerAge:"",
            customerJob:"",
            customerPartner:"",
            address:"",
            urgency:"",
            customerLevel:"",
            qq:"",
            identityCard:"",
            offerEndTime:"",
            offerEndRemark:"",
            money:"",
            area:"",
            intentionCategory:"",
            radioProject:"",
            insideProject:"",
            outsideProject:"",
            province:"",
            city:"",
            district:"",
            tradeProject:"",
            istrade:"",
            customerEmail:'', //邮箱
            cateringType: '',//曾经从事餐饮类型
            sponsor:'', //出资人
            sponsorOther:'',//其它出资人的姓名及联系方式
            decisionMaker: '',//决策人
            decisionMakerOther: '',//其它决策人的姓名及联系方式
            customerPartnerDetail: ''//合伙人姓名及联系方式
    };
}else{
    vform={
        customerName:customer.cusName,
        customerPhone:customer.linkPhone,
        customerSex:customer.sex==null?"":customer.sex,
        wechat:customer.wechat,
        wechat2:customer.wechat2,
        wechatUrl:customer.wechatCode,
        experience:customer.hasExperience==null?"":customer.hasExperience,
        customerAge:customer.age,
        identityCard:customer.identityCard,
        offerEndTime:dateFormat(customer.offerEndTime),
        offerEndRemark:customer.offerEndRemark,
        customerJob:customer.profession==null?"":customer.profession,
        customerPartner:customer.partnerType==null?"":customer.partnerType,
        address:customer.hasAddress==null?"":customer.hasAddress,
        urgency:crtTimeFtt(customer.urgentDate),
        customerLevel:customer.cusLevel==null?"":customer.cusLevel,
        qq:customer.qq,
        money:intention.advanceAmount==null?"":intention.advanceAmount,
        area:intention.area==null?"":intention.area,
        intentionCategory:intention.purType==null?"":intention.purType,
        radioProject:intention.purProjectType==null?"":intention.purProjectType,
        outsideProject:intention.purOutProject,
        insideProject:intention.purInProject,
        province:intention.province,
        city:intention.city,
        district:intention.district,
        tradeProject:intention.tradeProject==null?"":intention.tradeProject,
        istrade:intention.istrade,
        customerEmail:customer.email==null?"":customer.email, //邮箱
        cateringType: customer.experience==null?"":customer.experience,//曾经从事餐饮类型
        sponsor:customer.investors==null?"":customer.investors, //出资人
        sponsorOther:customer.investorsNamePhone==null?"":customer.investorsNamePhone,//其它出资人的姓名及联系方式
        decisionMaker: customer.decide==null?"":customer.decide,//决策人
        decisionMakerOther: customer.decideNamePhone==null?"":customer.decideNamePhone,//其它决策人的姓名及联系方式
        customerPartnerDetail:customer.partnerNamePhone==null?"":customer.partnerNamePhone//合伙人姓名及联系方式
    }
    if(customer.wechatCode !=null && customer.wechatCode!=''){
        showwchatcode = customer.wechatCode;
        showWchatFlag = true;
    }else{
        showwchatcode = "/images/errorIcon.jpg";
        showWchatFlag = false;
    }
    // if( vform.ishasWx!=null&& vform.ishasWx!=''){
    // }else{
    // }
    if( vform.urgency!=null&& vform.urgency!=''){
        showUrgency = true;
    }else{
        showUrgency = false;
    }

}

if(base==null){
    base={
        typeName:"",
        categoryName:"",
        sourceTypeName:"",
        sourceTypeName:"",
        searchWord:"",
        projectName:"",
        messageTime:"",
        messagePoint:""
    }
}else{
    base.messageTime = crtTimeFtt1( base.messageTime)
}

function crtTimeFtt1(val, row) {
    if (val != null) {
        var date = new Date(val);

        var month = (date.getMonth() + 1);
        if(month<10){
            month = "0"+month;
        }
        var day = date.getDate();
        if(day<10){
            day = "0"+day;
        }
        var hour = date.getHours();
        if(hour<10){
            hour = "0"+hour;
        }
        var minu = date.getMinutes();
        if(minu<10){
            minu = "0"+minu;
        }
        var mill = date.getSeconds();
        if(mill<10){
            mill = "0"+mill;
        }
        return date.getFullYear()+''+(month) + ''+day+' '+hour+":"+minu+":"+mill;
    }
}

function crtTimeFtt(val, row) {
    if (val != null) {
        var date = new Date(val);

        var month = (date.getMonth() + 1);
        if(month<10){
            month = "0"+month;
        }
        return date.getFullYear()+''+(month) + '月';
    }
}
function dateFormat(val) {
          if (val == undefined) {
             return "";
          }
          return moment(val).format("YYYY-MM-DD");
        }

 var addCustomerVM=   new Vue({
        el: '#addCustomer',
        data: function() {
            return {
                audioShow:false,//播放器默认不显示
                dialogFormUploadImgSrc: '',
                dialogFormUploadImg:false,
                isDisabled:true,//默认不可点击
                wechatVisible: false,//查看微信号
                radioProject:'',
                dialogFormVisible: false,
                dialogFormImg:false,
                showwchatcode:showwchatcode,
//                showWchatFlag:showWchatFlag,
                showUrgency:showUrgency,
                form:vform,
                clueBase:base,
                intention:intention,
                categoryArr:[],
                typeArr:[],
                mediumArry:[],
                adsenseArr:[],
                CateringExperienceArr:[],
                occupationArr:[],
                partnerArr:[],
                optionAddressArr:[],
                customerLevelArr:[],
                IntentionalCategoryArr:[],
                ussmArr:[],
                StorefrontAreaArr:[],
                provinceArr:[],
                cityArr:[],
                districtArr:[],
                proSelect:proSelect,
                wechatForm: {
                    wechat2:'',
                    wechatUrl:'',
                    fileList:[]
                },
                formLabelWidth: '150px',
                formLabelWidth1: '140px',
                rules:{
                    // customerName: [
                    //     { required: true, message: '客户姓名不能为空', trigger: 'blur' }
                    // ],
                },
                statusOptions: [{
                    value: '0',
                    label: '推广列表'
                }, {
                    value: '1',
                    label: '电销列表'
                }],
                optsex: [{
                    value: '1',
                    label: '男'
                }, {
                    value: '2',
                    label: '女'
                }],
                options1: [{
                    value: '0',
                    label: '电销组'
                }, {
                    value: '1',
                    label: '媒介'
                }],
                dialogForm: {
                    phoneNum:''
                },
                dialogRules:{
                    phoneNum: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' }
                    ]
                },
                multipleSelection:[],//上传资料
                multipleTrackingSelection:[],
                fileList: [],
                cusStatusArr:[],
                dialingTime:'',//跟进记录
                lineFormShow: false,
                formInline: { 
                	id:'',
                	callTime: '',
                	customerStatus: '',
                	isCall:'',
                	resourceStatus:'',
                	focusPoint:'',
                	visitStatus:'',
                	nextVisitTime:'',
                },
              uploadOssHost:'',
              uploadParamData: {
                key:'22',
                policy:'',
                OSSAccessKeyId:'',
                success_action_status : '200', //让服务端返回200,不然，默认会返回204
                signature:'',
                'x:params':'',
                'realName':''
              },
              ossUrl:ossUrl,
              limit:1,
                tableDataC1: clueFileList,//文件记录
                tableDataC2: trackingList,//跟进记录
                tableDataC3: callRecord,  //通话记录
                tableDataC4:circulationList//流转记录
            }             
        },
        methods: {
          getUploadParam(){
            var signUrl = this.ossUrl+"?serviceType=aggregation";
            var param={};

            axios.get(signUrl, param)
            .then(function (response) {
              // console.info(response);
              var respData= response.data;
              var host = respData.host;
              var params={};
              var new_multipart_params = {
                dir:respData.dir,
                'policy': respData.policy,
                'OSSAccessKeyId': respData.accessid,
                'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
                'signature': respData.signature,
                'x:params':params,//自定义编码，basse64编码后的字符串,
                'realName':''
              };
              addCustomerVM.uploadParamData= new_multipart_params;
              addCustomerVM.uploadOssHost = host;
            })
            .catch(function (error) {
              console.log(error);
            });
          },
             rebackClue(){
            	 window.location.href="/tele/clueMyCustomerInfo/initmyCustomer"; 	
            },
            submitDialogForm(dialogForm) {
                this.$refs[dialogForm].validate((valid) => {
                    if (valid) {
                        console.log('submit!!');
                        // 关闭弹窗
                        this.dialogFormVisible = false; 
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            number(){
    　　　                       this.form.customerPhone=this.form.customerPhone.replace(/[^\.\d]/g,'');
               this.form.customerPhone=this.form.customerPhone.replace('.','');
                                 　　},

            switchSoundBtn(id,url,callSource){
                // 播放器显示
                // this.audioShow=true;
                if(callSource=='2'|| callSource=='7' ){
                    // switchSound(id,url);
                    window.parent.open(url)
                    return;
                }
                if(callSource == '6'){
                    var httpUrl = url.replace("https","http");
                    var page = window.open();
                    var html = "<body style='background: #000;text-align: center;position: relative'><div style='position: absolute;top: 50%;left: 50%;margin-left: -150px;margin-top:-30px;'><audio src='"+httpUrl+"' controls='controls' autoplay></audio></div></body>";
                    page.document.write(html);
                    return;
                }
                var newWindow = window.open();
                var param = {};
                param.id=id;
                axios.post('/call/callRecord/getRecordFile',param)
                    .then(function (response) {
                        var data =  response.data
                        if(data.code=='0'){
                            var url = data.data;
                            // switchSound(id,url);
                            newWindow.location.href = url;
                        }else{
                            console.error(data);
                            addCustomerVM.$message({message:data.msg,type:'error'});
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    }).then(function(){
                });
            },
          getStartTimeText(row, column, value, index){
            var valText="";
            if(value){
              valText =  moment.unix(Number(value)).format("YYYY-MM-DD HH:mm:ss");
            }
            return valText;
          },
            getTalkTimeText(row, column, value, index){
                var valText="";
                if(value){
                    valText =  this.formatSeconds(value);
                }
                return valText;
            },
            formatSeconds(s){
                var t="";
                var hour = Math.floor(s/3600);
                var min = Math.floor(s/60) % 60;
                var sec = s % 60;
                if(hour<10){
                	t+="0";
                }
                t+=hour+":";
                if(min < 10){
                    t += "0";
                }
                t += min + ":";
                if(sec < 10){
                    t += "0";
                }
                t+=sec;
                // t += sec.toFixed(2);
                return t;
            },
            downloadAudio(id,url,callSource){
                var param = {};
                param.id=id;
                axios.post('/call/callRecord/getRecordFile', param)
                    .then(function (response) {
                        var data = response.data;
                        if (data.code == '0') {
                            var url = data.data;
                            if (url) {
                                var fileName = url.split('?')[0];
                                var fileNameArr = fileName.split("/");
//                                download(url, fileNameArr[fileNameArr.length - 1]);
                                if(callSource=='3'){
                                	 var decodeUrl = encodeURI(url);
                                     url = "/client/heliClient/downloadHeliClientAudio?url="+decodeUrl;
                                 }else if(callSource == 7){
                                    var httpUrl = url.replace("https","http");
                                    window.parent.open(httpUrl);
                                    return;
                                }
                                var x=new XMLHttpRequest();
                                x.open("GET", url, true);
                                x.responseType = 'blob';
                                x.onload=function(e){download(x.response, fileNameArr[fileNameArr.length-1], 'audio/\\*' ); }
                                x.send();
                            }

                        }else{
                            console.error(data);
                            addCustomerVM.$message({message:data.msg,type:'error'});
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    }).then(function(){
                });

            },
            handleSelectionChange(val) {  //上传资料
                this.multipleSelection = val;
            },
            handleTrackingSelection(val){
               this.multipleTrackingSelection=val;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
              console.log(file);
            },
            handleExceed(files, fileList) {
              this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
              return this.$confirm(`确定移除 ${ file.name }？`);
            },
            beforeFormUpload(file) { //上传格式大小的限制
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isMP3 = file.type === 'audio/mp3';
                const isLt200 = file.size / 1024 < 200; //200k;
                if( !isJPG || !isPNG || !isMP3 ){
                    this.$message.error('上传文件只能是 JPG/PNG/mp3 格式!');
                }
                return (isJPG || isPNG || isMP3) && isLt200;           
            },
            currentProvince(selVal){
               var  param={};
                param.type="1";
                param.name=selVal;
                axios.post('/area/sysregion/querySysRegionByParam',param).then(function (response) {  
                  addCustomerVM.cityArr=response.data.data.data;
                });  	
             },
             currentCity(selVal){
            	 var param={};
                 param.type="2";
                 param.name=selVal;
                 axios.post('/area/sysregion/querySysRegionByParam',param).then(function (response) {  
                   addCustomerVM.districtArr=response.data.data.data;
                 });  	
              },

            handleOperateFn(index, row) { //上传资源"查看图片、下载录音"
                // if( row.fileType == 'mp3' ){
                if (row.fileType == 'mp3'|| row.fileType == 'mp4' || row.fileType == 'wav' || row.fileType == 'wma'|| row.fileType == '3gpp' || row.fileType == 'm4a' ||row.fileType == 'ape'|| row.fileType == 'midi' || row.fileType == 'amr'|| row.fileType == 'MP3'|| row.fileType == 'MP4' ||row.fileType == 'WAV' || row.fileType == 'WMA'|| row.fileType == '3GPP' || row.fileType == 'M4A' ||row.fileType == 'APE'|| row.fileType == 'MIDI' || row.fileType == 'AMR') {
                    var x=new XMLHttpRequest();
                    x.open("GET", row.filePath, true);
                    x.responseType = 'blob';
                    x.onload=function(e){
                        download(x.response, row.fileName, "auido/mp3" );
                    };
                    x.send();
//                    this.download1( row.filePath, row.fileName, 'auido/mp3' );
                }else{
                    this.dialogFormUploadImgSrc = row.filePath;
                    this.dialogFormUploadImg =  true;
                }
            },
            download1(data, strFileName, strMimeType) {
                download(data, strFileName, strMimeType);
            },
            addRecord() { //添加记录
                this.tableDataC2.push({
                    dialingTime:`<el-form-item label="" size="mini">
                                    <el-select v-model="formInline.region" placeholder="客户状态">
                                      <el-option label="区域一" value="shanghai"></el-option>
                                      <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                  </el-form-item>`,
                    customerStatus: '',
                    dialing:'',
                    resourceAvailability:'',
                    customerfocus:'',
                    visited:'',
                    visitedNextTime:'',
                    creater:''
                });
            },
            handlePlay(index, row) { //通话记录播放btn
            	$("audio").hide();
                console.log(index, row);
                var show = $(".el-icon-pause-svg:eq("+index+")").css("display");
                if( $(".el-icon-pause-svg:eq("+index+")").css("display") == 'none' ){
                    $("button.playBtn:eq("+index+") i").remove();
                    $(".el-icon-pause-svg:eq("+index+")").css("display","block");
                    $("audio").get(index).play();
                }else{
                    $("button.playBtn:eq("+index+")").append('<i class="el-icon-caret-right"></i>');
                    $(".el-icon-pause-svg:eq("+index+")").css("display","none");
                    $("audio").get(index).pause();
                }
            },
            handleDownload(index, row) { //通话记录下载btn
                console.log(index, row);
                $(".downloadMp3:eq("+index+") a").prop("download","true");
                $(".downloadMp3:eq("+index+") a>p").trigger("click");
            },
          openWechat() {
            this.wechatVisible = true
            this.wechatForm.wechat2=this.form.wechat2;
            this.wechatForm.wechatUrl=this.form.wechatUrl;
          },
            formatTimeFn(date) {
                if (!date) {
                    return "";
                }
                debugger
                var dateNew = new Date(date);
                var year = dateNew.getFullYear()
                var month = dateNew.getMonth() + 1
                var day = dateNew.getDate()
                var hour = dateNew.getHours()
                var minute = dateNew.getMinutes()
                var second = dateNew.getSeconds()
                return year + "-" + this.formatNumberFn(month) + "-" + this.formatNumberFn(day) + " " + this.formatNumberFn(hour) + ":" + this.formatNumberFn(minute) + ":" + this.formatNumberFn(second);
            },
            formatNumberFn(n) {
                n = n.toString()
                return n[1] ? n : '0' + n
            },
        },
        mounted(){
            document.getElementById('addCustomer').style.display = 'block';
        },
        created(){
         //初始资源类别数据
          	var  param={};
          	param.groupCode="clueCategory";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
           	    addCustomerVM.categoryArr=response.data.data;
            });
          	 //初始化资源类型数据
       	   param={};
       	   param.groupCode="clueType";
           axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
               addCustomerVM.typeArr=response.data.data;
            });
           
          //初始化资源类型数据
      	   param={};
      	   param.groupCode="clueType";
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.typeArr=response.data.data;
           });
          //初始化媒介
    	   param={};
    	   param.groupCode="medium";
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
            addCustomerVM.mediumArry=response.data.data;
         });
          //广告位
          param={};
          param.groupCode="adsense"; 
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.adsenseArr=response.data.data;
           });
          
          //餐饮经验
          param={};
          param.groupCode="CateringExperience"; 
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.CateringExperienceArr=response.data.data;
              for(var i = 0 ; i < addCustomerVM.CateringExperienceArr.length ; i++){
                  if(addCustomerVM.CateringExperienceArr[i].value==vform.experience){
                      vform.experience = addCustomerVM.CateringExperienceArr[i].name;
                  }
              }
           });
          //职业
          param={};
          param.groupCode="occupation"; 
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.occupationArr=response.data.data;
              for(var i = 0 ; i < addCustomerVM.occupationArr.length ; i++){
                  if(addCustomerVM.occupationArr[i].value==vform.customerJob){
                      vform.customerJob = addCustomerVM.occupationArr[i].name;
                  }
              }
           });
          
          //合伙人
          param={};
          param.groupCode="partner"; 
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.partnerArr=response.data.data;
              for(var i = 0 ; i < addCustomerVM.partnerArr.length ; i++){
                  if(addCustomerVM.partnerArr[i].value==vform.customerPartner){
                      vform.customerPartner = addCustomerVM.partnerArr[i].name;
                  }
              }
           });
          
          //选址情况
          param={};
          param.groupCode="optionAddress"; 
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.optionAddressArr=response.data.data;
              for(var i = 0 ; i < addCustomerVM.optionAddressArr.length ; i++){
                  if(addCustomerVM.optionAddressArr[i].value==vform.address){
                      vform.address = addCustomerVM.optionAddressArr[i].name;
                  }
              }
           });
          //客户级别
          param={};
          param.groupCode="customerLevel"; 
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.customerLevelArr=response.data.data;
              for(var i = 0 ; i < addCustomerVM.customerLevelArr.length ; i++){
                  if(addCustomerVM.customerLevelArr[i].value==vform.customerLevel){
                      vform.customerLevel = addCustomerVM.customerLevelArr[i].name;
                  }
              }
           });
          //意向品类
          param={};
          param.groupCode="project_category";
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.IntentionalCategoryArr=response.data.data;
              for(var i = 0 ; i < addCustomerVM.IntentionalCategoryArr.length ; i++){
                  if(addCustomerVM.IntentionalCategoryArr[i].value==vform.intentionCategory){
                      vform.intentionCategory = addCustomerVM.IntentionalCategoryArr[i].name;
                  }
              }
           });
        //投资金额
          param={};
          param.groupCode="investmentAmount";
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.ussmArr=response.data.data;
              for(var i = 0 ; i < addCustomerVM.ussmArr.length ; i++){
                  if(addCustomerVM.ussmArr[i].value==vform.money){
                      vform.money = addCustomerVM.ussmArr[i].name;
                  }
              }
           });
          //店面大小
          param={};
          param.groupCode="StorefrontArea"; 
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
              addCustomerVM.StorefrontAreaArr=response.data.data;
              for(var i = 0 ; i < addCustomerVM.StorefrontAreaArr.length ; i++){
                  if(addCustomerVM.StorefrontAreaArr[i].value==vform.area){
                      vform.area = addCustomerVM.StorefrontAreaArr[i].name;
                  }
              }
           });
         //客户状态 
          param={};
          param.groupCode="customerStatus"; 
          axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {  
        	  addCustomerVM.cusStatusArr=response.data.data;
           });
         //获取省
          param={};
          param.type="0";
          axios.post('/area/sysregion/querySysRegionByParam',param).then(function (response) {
       	     addCustomerVM.provinceArr=response.data.data.data;
          });

         
       
    	}
    })
</script>
<!-- <script th:src="@{/js/custom/callrecord/simpleAudio01.js?v=1.0.0}"></script> -->
<script th:src="@{/js/custom/callrecord/simpleAudio02.js?v=1.0.0}"></script>
<script th:src="@{/js/custom/callrecord/download.js?v=1.0.0}"></script>
</html>